<%--
  Created by IntelliJ IDEA.
  User: 刘洋
  Date: 2019/10/29
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>题目编辑</title>
	<jsp:include page="/layout/_imports.jsp"></jsp:include>
</head>
<body>
<script>
    var j = 1;

    function addtr() {
        addtr("");
    }

    function addtr(content) {
        var symbol = String.fromCharCode(65 + j++);
        var inputField = $('<input/>').attr("name", "contents").attr("class", "form-control col-sm-11").attr("type", "text").val(content);
        var spanField = $("<div/>").attr("class","col-sm-1").append(symbol + "：");
        $("#contentsTable").append($("<div/>").append(spanField).append(inputField).attr("class","row"));
    }

    function detetr() {
        if ($("#contentsTable .row").length == 1) return;
        j--;
        $("#contentsTable .row:last").remove();
    }
    window.onload = function () {
        <c:forEach items="${item.contents}" varStatus="status">
			<c:if test="${status.count > 1}">
				addtr('${status.current}');
			</c:if>
        </c:forEach>
	}
</script>
<style>
	#contentsTable input{
		margin-bottom: 10px;
	}


	#contentsTable input:last-child {
		margin-bottom: 0;
	}


	#contentsTable .col-sm-1 {
		display: flex;
		align-items: center;
	}
	#contentsTable .row {
		margin-bottom: 10px;
	}
	#contentsTable .row:last-child{
		margin-bottom: 0;
	}
</style>
<c:import url="/layout/_nav.jsp"></c:import>
<div class="container">
	<div class="container">
		<h2>编辑题目</h2>
		<form action="${pageContext.request.contextPath}/item" method="post">
			<input type="hidden" name="state" value="update">
			<input type="hidden" name="id" value="${item.id}">

			<div class="form-group row">
				<label class="col-sm-2" for="title">标题</label>
				<div class="col-sm-10">
					<input class="form-control" id="title" type="text" name="title" value="${item.title}">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-2" for="contents">内容</label>
				<div class="col-sm-8" id="contentsTable">
					<div class="row">
						<div class="col-sm-1">
							<span>A:</span>
						</div>
						<input class="col-sm-11 form-control " id="contents" type="text" name="contents" value="${item.contents[0]}">
					</div>
				</div>
				<div class="col-sm-2">
					<input type="button" value="添加行" class="btn btn-primary" onclick="addtr()">
					<input type="button" value="删除行" class="btn btn-danger" onclick="detetr()">
				</div>
			</div>

			<div class="form-group row">
				<label for="score" class="col-sm-2">分数</label>
				<div class="col-sm-10">
					<input class="form-control" id="score" type="text" name="score" value="${item.score}">
				</div>
			</div>

			<div class="form-group row">
				<label for="answerId" class="col-sm-2">答案</label>
				<div class="col-sm-10">
					<input class="form-control" id="answerId" type="text" name="answer" value="${item.answer}">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-2">多选题</label>
				<div class="col-sm-10">
					<select class="form-control" name="multiple">
						<option value="True" <c:if test="${item.multiple}">selected</c:if>>True</option>
						<option value="False" <c:if test="${!item.multiple}">selected</c:if>>False</option>
					</select>
				</div>
			</div>

			<button type="submit" class="btn btn-primary">添加</button>
			<a href="/item?state=manage" class="btn btn-secondary">返回列表</a>
    </form>
</div>
</body>
</html>
